<%var csstpl = {%>

    </style>
    <%};%>
        <%var jstpl = {%>
            <script>
                var app = new Vue({
                    el: "#content",
                    data: {
                        query: {
                            pageNumber: 1,
                            pageSize: 10,
                            name: ''
                        },
                        data_result: {},
                        city: '',
                        area: '',
                    },
                    created: function() {
                        this.loadPage("init")
                    },
                    mounted() {
                        let form = layui.form;
                        let that = this;
                        form.on('submit(formDemo)', function(data) {
                            console.log(data);
                            Ajax('/system/agent/area/updateFee', data.field, function(d) {
                                if (d.state) {
                                    gx.alert(d.msg);
                                    that.loadPage();
                                    $("#addUpdateModal").modal('hide');
                                } else {
                                    gx.alert(d.msg);
                                }
                            })
                        })

                        form.on('submit(submitArea)', function(data) {
                            console.log(data);
                            Ajax('/system/agent/area/updateAreaFee', data.field, function(d) {
                                if (d.state) {
                                    gx.alert(d.msg);
                                    that.loadPage();
                                    $("#editAreaFeeModal").modal('hide');
                                } else {
                                    gx.alert(d.msg);
                                }
                            })
                        })


                    },
                    methods: {
                        loadPage: function(model) { //载入模式有两种  init初始化载入 load分页载入
                            if (model == "init") {
                                this.query.pageNumber = 1;
                            }
                            Ajax("/system/agent/area", this.query, function(d) {
                                app.data_result = d;
                                if (d.firstPage == true) {
                                    layui.laypage.render({
                                        elem: 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
                                            ,
                                        layout: ['count', 'prev', 'page', 'next',
                                            'limit', 'skip'
                                        ],
                                        count: d.totalRow //数据总数，从服务端得到
                                            ,
                                        limit: app.query.pageSize,
                                        jump: function(obj, first) {
                                            app.query.pageNumber = obj.curr;
                                            if (app.query.pageSize != obj.limit) {
                                                app.query.pageSize = obj.limit;
                                                app.loadPage("init");
                                                return;
                                            }
                                            if (!first) {
                                                app.loadPage("load");
                                            }
                                        }
                                    });
                                }
                            })
                        },
                        edit: function(d) {
                            this.city = d;
                            this.$nextTick(() => {
                                $("#addUpdateModal").modal("show");
                            });
                        },
                        open: function(d) {
                            Ajax('/system/agent/area/areaList', {
                                'city_id': d.cityid
                            }, function(res) {
                                if (res.state) {
                                    Vue.set(d, 'areaList', res.data);
                                    Vue.set(d, 'open', !d.open);
                                } else {
                                    gx.alert(res.msg);
                                }
                            })


                        },
                        openArea: function(d, state) {
                            let that = this;
                            Ajax('/system/agent/area/openArea', {
                                'state': state,
                                'id': d.id
                            }, function(res) {
                                gx.alert(res.msg);
                                that.loadPage();
                            })

                        },
                        editAreaFee: function(area) {
                            this.area = area;
                            this.$nextTick(() => {
                                $("#editAreaFeeModal").modal("show");
                            });
                        }
                    }
                })
            </script>
            <%};%>
                <%layout("../layout/_layout_layui.html",{title:"地址管理",jstpl:jstpl,csstpl:csstpl}){%>
                    <div class="layui-row" id="content" v-cloak>

                        <div class="layui-col-md8">
                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <input type="text" name="admin.name" v-model="query.name" placeholder="输入城市名称模糊 查询" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <a @click="loadPage('init')" class="layui-btn"><i class="layui-icon">&#xe615;</i> 查询/筛选</a>
                            </div>
                        </div>
                        <!-- 内容开始 -->
                        <div class="layui-col-md12" style="margin-top: 20px">
                            <table class="layui-table ">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>城市编号</th>
                                        <th>城市名称</th>
                                        <th>对应省份</th>
                                        <!-- <th>代理商</th> -->
                                        <!-- <th>代理价格</th> -->
                                        <th>是否开启下级区域</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody v-for="d in data_result.list">
                                    <td @click="open(d)">
                                        <i v-show="!d.open" class="layui-icon">&#xe623;</i>
                                        <i v-show="d.open" class="layui-icon">&#xe625;</i>
                                    </td>
                                    <td>{{d.cityid }}</td>
                                    <td>{{d.city }}</td>
                                    <td>{{d.province }}</td>
                                    <!-- <td>{{d.agentName }}</td> -->
                                    <!-- <td>{{d.agent_fee }}</td> -->
                                    <td>{{d.is_area==1?"开启":"关闭" }}</td>
                                    <td>
                                        <a @click="openArea(d,'0')" class="layui-btn layui-btn-sm" v-if="d.is_area==1">关闭下级代理</a>
                                        <a @click="openArea(d,'1')" class="layui-btn layui-btn-sm" v-if="d.is_area!=1">开启下级代理</a>
    <!-- <a @click="edit(d)" class="layui-btn layui-btn-sm" v-if="d.is_area!=1">修改代理价格</a>-->
                                    </td>

                                    <tr v-show="d.open&&d.areaList&&d.areaList.length>0">
                                        <td colspan="3">城市编号</td>
                                        <td colspan="3">城市名称</td>
                                        <!-- <td colspan="2">代理价格</td> -->
    <!-- <td colspan="2">操作</td>-->
                                        <!-- <td colspan="2">操作</td> -->
                                    </tr>
                                    <tr v-show="d.open&&d.areaList&&d.areaList.length>0" v-for="area in d.areaList">
                                        <td colspan="3">{{area.areaid}}</td>
                                        <td colspan="3">{{area.area}}</td>
                                        <!-- <td colspan="2">{{area.agent_fee}}</td> -->
                     <!--<td colspan="2"><a @click="editAreaFee(area)" class="layui-btn layui-btn-sm">修改代理价格</a></td> -->
                                    </tr>
                                </tbody>
                                <tbody id="tbody_body" v-if="data_result.length==0">
                                    <tr>
                                        <td colspan="8" style="text-align:center;height:300px">
                                            <h1>没有数据</h1>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <fieldset id="gexin_page" class="layui-elem-field layui-field-title"></fieldset>
                        </div>
                        <div class="modal fade" id="addUpdateModal" tabindex="-1" role="dialog" aria-hidden="true">
                            <form id="addUpdateForm" class="layui-form form-horizontal ">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">
                                                修改代理价格
                                            </h4>
                                        </div>
                                        <div class="modal-body">
                                            <!-- 弹出框开始  -->
                                            <div class="layui-row layui-col-space15">
                                                <!-- 弹出框开始  -->
                                                <input type="hidden" :value="city.id" name="city.id">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">代理价格</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" lay-verify="required|number" :value="city.agent_fee" 　placeholder="请输入要修改的代理价格" name="city.agent_fee">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <div class="layui-form-item">
                                                <div class="layui-input-block">
                                                    <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                                                    <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>


                        <div class="modal fade" id="editAreaFeeModal" tabindex="-1" role="dialog" aria-hidden="true">
                            <form id="addUpdateForm" class="layui-form form-horizontal ">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title">
                                                修改代理价格
                                            </h4>
                                        </div>
                                        <div class="modal-body">
                                            <!-- 弹出框开始  -->
                                            <div class="layui-row layui-col-space15">
                                                <!-- 弹出框开始  -->
                                                <input type="hidden" :value="area.id" name="area.id">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label">代理价格</label>
                                                    <div class="layui-input-block">
                                                        <input class="layui-input" type="text" lay-verify="required|number" :value="area.agent_fee" 　placeholder="请输入要修改的代理价格" name="area.agent_fee">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <div class="layui-form-item">
                                                <div class="layui-input-block">
                                                    <button type="button" class="layui-btn" lay-submit lay-filter="submitArea">提交</button>
                                                    <button type="button" data-dismiss="modal" class="layui-btn layui-btn-primary">关闭</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                <%}%>